<template>
  <view class="container" :style="appThemeStyle">
    <mescroll-body
      ref="mescrollRef"
      :sticky="true"
      @init="mescrollInit"
      :down="{ native: true }"
      :up="upOption"
      @up="upCallback"
      @down="downCallback"
    >
      <view class="list">
        <view class="item" v-for="(item, index) in billList" :key="index">
          <view class="left">
            <view class="title">交易流水号 {{ item.transactionId }}</view>
            <view class="wrapper">
              <image :src="$image('/storeminiapp/gift_card_bg.png')"></image>
              <view class="text">
                <view class="name">收款</view>
                <view class="date">{{ item.createTime }}</view>
              </view>
            </view>
          </view>
          <view class="right">+{{ item.payAmount }}</view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>
<script>

import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
import * as PaymentApi from '@/api/order/payment'
import store from '@/store'
import PayChannelTypeEnum from "@/common/enum/order/payChannelType"

export default {
  name: "index",
  mixins: [MescrollMixin],
  data() {
    return {
      // 上拉加载配置
      upOption: {
        // 首次自动执行
        auto: true,
        // 每页数据的数量; 默认10
        page: { size: 10 },
        // 数量要大于3条才显示无更多数据
        noMoreSize: 3,
        empty: {
          tip: '无账单记录，快去收款吧！'
        }
      },
      billList: getEmptyPaginateObj(),
      queryParams: {
        dateType: 1,
        payChannelId: PayChannelTypeEnum.GIFT_CARD.value
      }
    }
  },
  computed: {
    store() {
      return store.getters.store
    }
  },
  onLoad() {
  },
  methods: {
    /**
     * 上拉加载的回调 (页面初始化时也会执行一次)
     * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
     * @param {Object} page
     */
    upCallback(page) {
      this.getBillList(page.num)
        .then(res => {
          const curPageLen = res.length
          this.mescroll.endBySize(curPageLen)
        })
        .catch(() => this.mescroll.endErr())
    },

    /**
     * 获取订单评价列表
     * @param {Number} current 页码
     */
    getBillList(current = 1) {
      return new Promise((resolve, reject) => {
        PaymentApi.list({ ...this.queryParams,  current }, { load: false })
          .then(result => {
            const newList = result.data
            this.billList = getMoreListData(newList, this.billList, current)
            resolve(newList)
          })
          .catch(reject)
      })
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 24rpx;

  .list {

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 16rpx;
      background: #fff;
      padding: 24rpx;
      margin-bottom: 16rpx;

      .left {
        flex: 1;

        .title {
          font-size: 28rpx;
          color: #999999;
          margin-bottom: 24rpx;
        }

        .wrapper {
          display: flex;
          align-items: center;

          image {
            width: 146rpx;
            height: 88rpx;
            margin-right: 32rpx;
            border-radius: 5rpx;
          }

          .text {
            flex: 1;
            font-size: 28rpx;

            .name {
              font-weight: bold;
              margin-bottom: 10rpx;
            }

            .date {
              color: #999999;
            }
          }
        }
      }

      .right {
        width: 110rpx;
        font-size: 30rpx;
        text-align: right;
        font-weight: bold;
      }
    }
  }
}
</style>
